<script>
import mixin from "../../common/mixin";
import { mapGetters } from 'vuex'
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      tabList: [],
      tabList2: [],
      activeTab: '全部',
      show: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  onShow() {
    this.$api.getCategoryList({
    }).then(res => {
      this.tabList2 = res.map(item => item.name)
      this.tabList = [
         '全部',
          ...this.tabList2
      ]
    })
    this.getList()
  },
  methods: {
    changeType(item) {
      this.activeTab = item
      this.getList()
    },
    getList() {
      if (!this.userInfo.id) return
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getPostList({
        category: this.activeTab === '全部' ? '' : this.activeTab,
        user_id: this.userInfo.id
      }).then(res => {
        this.dataList = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    toDel(item) {
      uni.showModal({
        title: '提示',
        content: '确定删除该职位吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中'
            })
            this.$api.deletePost({
              id: item.id
            }).then(() => {
              uni.showToast({
                title: '删除成功',
                icon: 'none'
              })
              this.getList()
            }).catch(() => {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            })
          }
        }
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/post/detail?type=${item.category}&id=` + item.id
      })
    },
    upItem(item) {
      uni.showLoading({
        title: '加载中'
      })
      this.$api.updatePostSort({
        id: item.id,
      }).then(() => {
        uni.showToast({
          title: '置顶成功',
          icon: 'none'
        })
        this.getList()
      }).catch(() => {
        uni.showToast({
          title: '置顶失败',
          icon: 'none'
        })
      })
    },
    addItem(item) {
      console.log('---', item)
      uni.navigateTo({
        url: '/pages/post/detail?type=' + item
      })
    }
  }
}
</script>

<template>
  <div class="post">
    <u-navbar title="职位管理" :background="{ background: '#05C8CE'}" title-color="#000" :border-bottom="true"></u-navbar>
    <div class="search-wrapper">
      <div class="tabs">
        <div :class="['tab-item', item === activeTab ? 'active' : '']" @click="changeType(item)" v-for="item in tabList">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="list-view">
      <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="list-item" v-for="(item,index) in dataList" :key="index">
          <div class="f-r j-b">
            <div class="title">{{ item.name }}</div>
            <image src="/static/post/up.png" style="width: 32rpx;height: 44rpx " @click="upItem(item)"></image>
          </div>
          <div class="text" style="text-align: left">{{ item.desc }}</div>
          <div class="line"></div>
          <div class="f-r a-c j-b">
            <div style="display: flex;align-content: center;margin: 12rpx 0">
              <div class="category">{{ item.category }}</div>
              <div class="post">{{ item.post_category }}</div>
            </div>
            <div style="display: flex;align-content: center;margin: 12rpx 0">
              <div :class="['button info']" @click="toDel(item)" style="margin-right: 30rpx">删除</div>
              <div :class="['button primary']" @click="toDetail(item)">修改</div>
            </div>
          </div>
        </div>
        <u-loadmore v-if="dataList.length" :status="loading" />
      </scroll-view>
    </div>
    <image class="add" src="/static/post/add.png" v-show="!show" @click="show =!show"></image>
    <u-mask :show="show" :custom-style="{background: 'rgba(0, 0, 0, 0.3)'}" :zoom="false"  @click="show =!show">
      <div style="
        position: fixed;
        right: 80rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        bottom:200rpx">
        <div style="padding-right: 20rpx">
          <div class="add-list">
            <div class="add-item" v-for="item in tabList2" @click="addItem(item)">
              {{ item }}
            </div>
          </div>
        </div>
        <image class="add2" src="/static/post/add.png"></image>
      </div>
    </u-mask>
  </div>
</template>

<style lang="scss">
.post {
  height: 100%;
  background: #F3F3F3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .add {
    position: fixed;
    right: 80rpx;
    bottom: 200rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .add2 {
    width: 80rpx;
    height: 80rpx;
  }
  .add-list {
    background-image: url("/static/post/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 158rpx;
    display: flex;
    flex-direction: column;
    padding: 12rpx;
    padding-top: 18rpx;
    .add-item {
      width: 100%;
      height: 56rpx;
      text-align: center;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 56rpx;
      background-color: #05C8CE;
      margin-bottom: 24rpx;
      border-radius: 12rpx;
    }
  }
  .search-wrapper {
    padding: 14rpx;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    .tabs {
      width: 100%;
      display: flex;
      align-items: center;
      .tab-item {
        flex: 1;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #191919;
        line-height: 33rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tab-item.active {
        height: 56rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #191919;
        line-height: 47rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -10rpx;
          transform: translateX(-50%);
          width: 40rpx;
          height: 8rpx;
          background: #05C8CE;
          border-radius: 36rpx 36rpx 36rpx 36rpx;
        }
      }

    }
  }
  .list-item {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 4rpx;
    margin-bottom: 36rpx;

    .category {
      height: 44rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      line-height: 44rpx;
      padding: 0 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #FFFFFF;
      text-align: center;
    }
    .post {
      height: 44rpx;
      border: 1px solid #05C8CE;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      line-height: 40rpx;
      padding: 0 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #868686;
      text-align: center;
      margin-left: 20rpx;
    }
    .title {
      height: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #000000;
      line-height: 47rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .location {
      font-size: 24rpx;
      color: #666666;
    }
    .line {
      width: 100%;
      border: 1rpx solid #EDEDED;
      margin: 28rpx 0 12rpx 0;
    }
    .f-r {
      display: flex;
    }
    .a-c {
      align-items: center;
    }
    .j-b {
      justify-content: space-between;
    }
    .button {
      height: 56rpx;
      padding: 0 36rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      line-height: 56rpx;
      color: #ffffff;
    }
    .button.info {
      background: #B6BDBD;
    }
    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #7B7B7B;
      line-height: 23rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .tag {
      padding: 0 24rpx;
      height: 34rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      border: 1px solid #05C8CE;
      line-height: 30rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }
    .tag2 {
      background-color: transparent !important;
      border: 1px solid #868686;
      color: #868686;
      font-size: 16rpx;
    }
  }
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    background: rgba(227, 233, 247, 0.18);
    .list-item {
      background-color: #ffffff;
      padding: 40rpx;
      border-radius: 4rpx;
      margin-bottom: 36rpx;
      .title {
        height: 64rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #000000;
        line-height: 47rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .location {
        font-size: 24rpx;
        color: #666666;
      }
      .line {
        width: 100%;
        border: 1rpx solid #EDEDED;
        margin: 28rpx 0 12rpx 0;
      }
      .f-r {
        display: flex;
      }
      .a-c {
        align-items: center;
      }
      .j-b {
        justify-content: space-between;
      }
      .button {
        height: 56rpx;
        padding: 0 36rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        line-height: 56rpx;
        color: #ffffff;
      }
      .button.info {
        background: #B6BDBD;
      }
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #7B7B7B;
        line-height: 23rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tag {
        padding: 0 24rpx;
        height: 34rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 1px solid #05C8CE;
        line-height: 30rpx;
        color: #ffffff;
        margin-right: 12rpx;
      }
      .tag2 {
        background-color: transparent !important;
        border: 1px solid #868686;
        color: #868686;
        font-size: 16rpx;
      }
    }
    padding: 24rpx;
  }
}
</style>
